//导入所需的react和react-dom
import {Fragment} from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {getBirthday} from './util/dateUtil'
//定义一个列表
const persons=[
  {
    id:'1001',
    name:'吕布',
    idcard:'610122198709098767',
    gender:1,
    avatar:'https://img0.baidu.com/it/u=884960334,1820357200&fm=253&fmt=auto&app=138&f=JPEG?w=669&h=500'
  },
  {
    id:'1002',
    name:'貂蝉',
    idcard:'610122198609098767',
    gender:2,
    avatar:'https://img2.baidu.com/it/u=74412117,1595098007&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'
  }
]
let isshow=true

const template=(<Fragment>
  {/* 
    jsx操作行内样式的注意点
    1、style={{k1:v1,k2:v2}}
    2、行内样式的css名称必须符合驼峰式命名法
  */}
  <h1 style={{color:'red',fontWeight:'normal',fontSize:'28px',fontStyle:'italic',fontFamily:'华文琥珀'}}>员工列表</h1>
  <table>
      <thead>
         <tr>
           <th>编号</th>
           <th>姓名</th>
           <th>性别</th>
           <th className={isshow?'qp':''}>生日</th>
           <th>头像</th>
         </tr>
      </thead>
      <tbody>
         {
           persons.map((item,index)=><tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.gender==1?'男':'女'}</td>
              <td>{getBirthday(item.idcard)}</td>
              <td><img src={item.avatar} className="avatar"/></td>
           </tr>)
         }
      </tbody>
  </table>
</Fragment>)
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(template)